@import 'src/components/slider/styles';

.c-timestep {
  display: flex;
  flex-direction: column;
  min-height: 30px;
  margin: ($space-1 * 1.5) 0 0;

  .date-pickers {
    display: flex;
    margin: 5px 0 10px 30px;
    align-items: center;

    .datepicker {
      margin: 0 5px;
      width: 90px;
    }
  }

  > .range-slider {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    .range {
      width: 100%;
      margin-left: 30px;
      cursor: pointer;

      &.can-play {
        margin-left: 10px;
      }
    }

    > .player-btn {
      border-color: transparent;
      border-style: none;
      border-width: 0;
      padding: 0;
      cursor: pointer;
      width: 20px;
      margin-top: 2px;

      &:focus {
        outline: none;
      }

      > svg {
        fill: #4a4a4a;
        width: 20px;
        height: 20px;
      }
    }
  }

  .slider-timestep {
    background-color: transparent;

    :global {
      .rc-slider-handle {
        &:nth-child(odd) {
          &:after {
            content: '';
            width: 4px;
            height: 4px;
            background-color: #444;
            position: absolute;
            border-radius: 4px;
            top: calc(50% - 2px);
            left: calc(50% - 2px);
          }
        }
      }

      .rc-slider-mark-text {
        font-size: 10px;
      }
    }
  }
}
